<template>
    <div class="collectionPointdetails">
        <h2 class="tit">采集点详情</h2>
        <div class="main">
            <p class="title">基本信息</p>
            <Row class="box">
                <Col span="9">
                    <div class="text">
                        <span>采集点：</span>
                        <span>{{ location.locationName }}</span>
                    </div>
                    <div class="text">
                        <span>计划工作人数（人）：</span>
                        <span>{{ task.workerNum }}</span>
                    </div>
                    <div class="text">
                        <span>预估工时（小时）：</span>
                        <span>{{ task.workHour / 60 }}</span>
                    </div>
                </Col>
                <Col span="7">
                    <div class="text">
                        <span>采集地点：</span>
                        <span>{{ location.address }}</span>
                    </div>
                    <div class="text">
                        <span>计划定点检测人数（人）：</span>
                        <span>{{ location.outsideNum }}</span>
                    </div>
                    <div class="text">
                        <span>采集点联系人：</span>
                        <span>{{ location.contactName }}</span>
                    </div>
                </Col>
                <Col span="8">
                    <div class="text">
                        <span>计划采集时间：</span>
                        <span
                            >{{ task.planeBeginTime }} 至
                            {{ task.planeEndTime }}</span
                        >
                    </div>
                    <div class="text">
                        <span>计划上门检测人数（人）：</span>
                        <span>{{ location.roomNum }}</span>
                    </div>
                    <div class="text">
                        <span>联系电话：</span>
                        <span>{{ location.contactPhone }}</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="main">
            <p class="title">工作信息</p>
            <Row class="box">
                <Col span="9">
                    <div class="text">
                        <span>实际采集时间：</span>
                        <span v-show="location.status === '1'"
                            >--&nbsp;&nbsp;至&nbsp;&nbsp; --</span
                        >
                        <span v-show="location.status === '2'"
                            >{{ location.startTime }} &nbsp;&nbsp;至&nbsp;&nbsp;
                            --
                        </span>
                        <span v-show="location.status === '3'"
                            >{{ location.startTime }} &nbsp;&nbsp;至&nbsp;&nbsp;
                            {{ location.endTime }}</span
                        >
                    </div>
                    <div class="text">
                        <span>定点检测已采集人数（人）：</span>
                        <span>{{ location.collectOutNum }}</span>
                    </div>
                    <div class="text">
                        <span>剩余预约人数（人）：</span>
                        <span>{{ location.appointmentNum }}</span>
                    </div>
                </Col>
                <Col span="7">
                    <div class="text">
                        <span>实际工作人数（人）：</span>
                        <span>{{ workerNum }}</span>
                    </div>
                    <div class="text">
                        <span>采集点已工作时间（小时）：</span>
                        <span>{{ time }}</span>
                    </div>
                    <div class="text">
                        <span>工作通道（个）：</span>
                        <span>{{ location.workCChannelsNum }}</span>
                    </div>
                </Col>
                <Col span="8">
                    <div class="text">
                        <span>上门检测已采集人数（人）：</span>
                        <span>{{ location.collectRoomNum }}</span>
                    </div>
                    <div class="text">
                        <span>平均采集速度（人 / 分钟）：</span>
                        <span>{{ location.collectSpeed }}</span>
                    </div>
                    <div class="text">
                        <span>闲置通道（个）：</span>
                        <span>{{ location.freeChannelsNum }}</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="main">
            <p class="title">工作人员</p>
            <Table
                stripe
                :columns="addMember"
                :data="addMemberDate"
                class="tablebox"
            ></Table>
        </div>
        <div class="buttonbox">
            <Button @click="reback">
                <i class="iconfont icon-butongyi icon"></i>返回
            </Button>
        </div>
    </div>
</template>
<script>
import api from '@/api/commonApi';
export default {
    data() {
        return {
            workerNum: '',
            time: '',
            // 医护人员列表
            addMember: [
                {
                    title: '排序',
                    align: 'center',
                    key: 'sum'
                },
                {
                    title: '人员姓名',
                    align: 'center',
                    key: 'doctorName'
                },
                {
                    title: '联系电话',
                    align: 'center',
                    key: 'doctorPhone'
                },
                {
                    title: '人员类型',
                    align: 'center',
                    key: 'sum',
                    render: (h, location) => {
                        let row = location.row;
                        let identity = '';
                        if (row.identity === '1') {
                            identity = '登记员';
                        } else if (row.identity === '2') {
                            identity = '采集员';
                        } else if (row.identity === '3') {
                            identity = '双重身份';
                        }
                        return [h('span', {}, identity)];
                    }
                },
                {
                    title: '所属机构',
                    align: 'center',
                    key: 'orgName'
                },
                {
                    title: '签到时间',
                    align: 'center',
                    key: 'startTime'
                },
                {
                    title: '签退时间',
                    align: 'center',
                    key: 'endTime'
                }
            ],
            addMemberDate: [],
            location: {},
            task: {}
        };
    },
    created() {},
    mounted() {
        this.$axios
            .post(api.queryLocationDetailById, {
                taskLocationId: this.$route.query.taskLocationId,
                taskId: this.$route.query.taskId
            })
            .then((res) => {
                if (res.data.success) {
                    let ret = res.data.object;
                    this.location = ret.location;
                    this.task = ret.task;
                    this.workerNum = ret.workerNum;
                    this.time = ret.time;
                    ret.sign.forEach((item, index) => {
                        item.sum = index + 1;
                    });
                    this.addMemberDate = ret.sign;
                }
            })
            .catch((err) => {
                console.log(err);
            });
    },
    methods: {
        // 返回上一页
        reback() {
            let id = this.$route.query.taskId;
            this.functionJS.queryNavgationTo(
                this,
                '/index/nucleicacid/missionMonitoring/monitoringlist',
                {
                    id
                }
            );
        }
    }
};
</script>
<style lang="less" scoped>
.collectionPointdetails {
    padding: 10px 0;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .tit {
        margin: 10px 0;
        font-weight: bold;
        text-align: center;
    }
    .main {
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 20px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        padding-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;
        }
        .box {
            padding: 0 30px;
        }
        .tablebox {
            margin: 0 20px;
        }
        .text {
            margin-bottom: 20px;
        }
        .pic {
            width: 50px;
            height: 50px;
        }
        .adminScope {
            margin: 10px 50px;
            width: 100%;
        }
    }
    .buttonbox {
        text-align: center;
        margin: 20px;
        .icon {
            font-size: 14px;
            margin-right: 5px;
        }
    }
}
</style>
